<template>
  <div class="page" style="height:100%">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-navbar">
          <block v-for="(item,index) in tabs" :key="index">
            <div :id="index" :class="{'weui-bar__item_on':activeIndex == index}" class="weui-navbar__item" @click="tabClick">
              {{item}}
            </div>
          </block>
          <div class="weui-navbar__slider" :class="navbarSliderClass"></div>
        </div>
        <div class="weui-tab__panel">
          <div class="weui-tab__content" :hidden="activeIndex != 0">
            <form @submit="formSubmit" class="weui-cell__bd">
              <div class="title">体重</div>
              <input name="weight" type="digit" class="weui-input input" placeholder="请输入体重(Kg)" />
              <button class="weui-btn btn" form-type="submit">提交</button>
            </form>
          </div>
          <div class="weui-tab__content" :hidden="activeIndex != 1">
            <form @submit="formSubmit" class="weui-cell__bd">
              <div class="title">收缩压</div>
              <input name="SP" type="digit" class="weui-input input" placeholder="请输入收缩压(mmHg)" />
              <div class="title">舒张压</div>
              <input name="DP" type="digit" class="weui-input input" placeholder="请输入舒张压(mmHg)" />
              <div class="title">脉搏</div>
              <input name="Pulse" type="digit" class="weui-input input" placeholder="请输入脉搏(bpm)" />
              <button class="weui-btn btn" form-type="submit">提交</button>
            </form>
          </div>
          <div class="weui-tab__content" :hidden="activeIndex != 2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const db = wx.cloud.database()

export default {
  data() {
    return {
      tabs: ['体重', '血压', '检测(Beta)'],
      activeIndex: 0,
      fontSize: 30
    }
  },
  computed: {
    navbarSliderClass() {
      if (this.activeIndex === 0) {
        return 'weui-navbar__slider_0'
      }
      if (this.activeIndex === 1) {
        return 'weui-navbar__slider_1'
      }
      if (this.activeIndex === 2) {
        return 'weui-navbar__slider_2'
      }
    }
  },
  methods: {
    tabClick(e) {
      console.log(e);
      this.activeIndex = Number(e.currentTarget.id);
    },
    formSubmit(e) {
      var data = e.mp.detail.value
      // 获取今日日期
      var time = new Date();
      var date = new Date();
      // var y = time.getFullYear();
      // var m = time.getMonth()+1;
      // var d = time.getDate();
      // let date = new Date(y.toString()+"-"+m.toString()+"-"+d.toString());

      //data = data.concat(time,date)

      if(data.weight == ''){
        wx.vibrateShort()
        wx.showToast({
          title: "请填写有效体重",
          icon: 'none',
          duration: 2000
        });
      }
      else if(data.SP == ''){
        wx.vibrateShort()
        wx.showToast({
          title: "请填写有效收缩压",
          icon: 'none',
          duration: 2000
        });
      }
      else if(data.DP == ''){
        wx.vibrateShort()
        wx.showToast({
          title: "请填写有效舒张压",
          icon: 'none',
          duration: 2000
        });
      }
      else if(data.Pulse == ''){
        wx.vibrateShort()
        wx.showToast({
          title: "请填写有效脉搏",
          icon: 'none',
          duration: 2000
        });
      }
      else{
        switch(this.activeIndex){
          case 0 :
          var userData={
            mode:0,
            time,
            date,
            weight:data.weight
          }
          break;
          case 1 :
          var userData={
            mode:1,
            time,
            date,
            DP:data.DP,
            SP:data.SP,
            Pulse:data.Pulse
          }
          break;
        }

        db.collection('userData').add({
          // data 字段表示需新增的 JSON 数据
          data: userData
        })
          .then(res => {
            if(res.errMsg == 'collection.add:ok'){
              wx.vibrateShort()
              wx.showToast({
                title: "添加成功！",
                icon: 'success',
                duration: 2000
              });
              var timer
              timer = setTimeout(function () {
                    wx.navigateBack({
                      delta: 1
                  });
                  clearTimeout(timer);
              }, 1500);
            }else{
              wx.vibrateShort()
              wx.showToast({
                title: "添加失败！",
                icon: 'loading',
                duration: 2000
              });
            }
          })

      }

      
      console.log('form发生了submit事件，携带数据为：', e.mp.detail.value)
    },
  }
}
</script>

<style scoped>
.page{
  height: 100%;
}
.page__bd {
  height: 100%;
}
.page__bd {
  padding-bottom: 0;
  height: 100%;
  
}
.weui-tab__content {
  height: 100%;
  text-align: left;
  margin: 20rpx; 
}
.weui-navbar__slider_0 {
  left: 15rpx;
  transform: translateX(0);
}
.weui-navbar__slider_1 {
  left: 15rpx;
  transform: translateX(250rpx);
}
.weui-navbar__slider_2 {
  left: 15rpx;
  transform: translateX(500rpx);
}
.title{
  margin: 20rpx;
  line-height: 100rpx;
  font-size: 50rpx;
  font-weight: 500;
  color: #63686e;
}
.input{
  background-color: #f6f6f6;
  border-radius: 20rpx;
  line-height: 60rpx;
  margin: 20rpx;
  padding: 10rpx 20rpx;
  font-size: 30rpx;
}
.btn{
  background-color: #f47645;
  position: absolute;
  bottom: 100rpx;
  width: 710rpx;
  color: #fff;
}
.btn::after{
  border: 0;
}
</style>
